<template>
	<view style="padding-bottom: 20rpx;">
		<view v-for="(item,index) in list" :key="index" class="list flex align-center justify-center">
			<view class="list-box">
				<view class="list-box-title">
					{{item.title}}
				</view>
				<view class="list-box-content">
					{{item.content}}
				</view>
				<view class="list-box-time flex align-center justify-between">
					{{item.createTime}}
					<text>{{item.type==1?'+':'-'}}{{item.money}}</text>
				</view>
			</view>
		</view>
		<view  v-if="list.length > 3" class="loadmore">
			<u-loadmore :status="status" />
		</view>
		
		<empty v-if="list.length==0" title="暂无明细" />
	<!-- 	<view style="margin: 10rpx auto;">
					<button
					  open-type="im"
					  :data-im-id="imId"
					  @im="imCallback"
					  @error="onimError"
					  style="
						height: 33px;
						background-color: #5173F8;
						color: #FFFFFF;
						font-size: 14px;
						margin:10px"
					>
					  联系客服 9:00~22:00
					</button>
			</view> -->
			<view style="margin: 10rpx auto;margin: 5px auto;position: fixed;bottom: 10%;right: 0;">
						<button
						  open-type="im"
						  :data-im-id="imId"
						  @im="imCallback"
						  @error="onimError"
						  style="
							background-color: rgb(94 97 109 / 57%);
							color: #FFFFFF;
							font-size: 12px;
							height: 60px;
							width: 75px;
							padding: 0;
							border-radius: 0;
							border-top-left-radius: 15px;
							border-bottom-left-radius: 15px;"
							
						>
						<view class="">
							<u-icon name="server-man" color="#fff" size="28"> </u-icon>
							<text style="margin: 0 5px;">客服</text>
						</view>
						
						  <text style="display: block;font-size: 9px;">9:00~22:00</text>
						</button>
				</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components:{
			empty
		},
		data() {
			return {
				status: 'loadmore',
				list:[],//余额明细
				page:1,
				pages:1,
				limit:10,
				imId:'chiguakefu',
			};
		},
		onLoad() {
			this.getList()
		},
		//加载更多
		onReachBottom() {
			if(this.page < this.pages){
				this.page += 1
				this.status = 'loading'
				this.getList()
			}else{
				this.status = 'nomore'
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		methods:{
			imCallback(e) {
			  console.log("跳转IM客服成功", e.detail);
			},
			onimError(e) {
							  console.log(this.imId)
			  console.log("拉起IM客服失败", e.detail);
			},
			getList(){
				let data = {
					page:this.page,
					limit:this.limit
				}
				this.$Request.getT('/app/moneyDetails/queryUserMoneyDetails',data).then(res=>{
					uni.stopPullDownRefresh()
					if(res.code == 0){
						this.pages = res.data.pages
						if(this.page < this.pages){
							this.status = 'loadmore'
						}else{
							this.status = 'nomore'
						}
						if(this.page == 1){
							this.list = res.data.records
						}else{
							this.list = [...this.list,...res.data.records]
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.list{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		.list-box{
			width: 686rpx;
			height:100%;
			border-radius: 24rpx;
			background-color: #ffffff;
			padding: 20rpx;
		}
		.list-box-title{
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
		}
		.list-box-content{
			width: 100%;
			margin-top: 20rpx;
		}
		.list-box-time{
			width: 100%;
			margin-top: 20rpx;
			color: #999999;
			text{
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.loadmore{
		margin: 20rpx 0;
	}
</style>
